<!--
 * @Author: lmk
 * @Date: 2022-04-16 12:11:01
 * @LastEditTime: 2022-05-08 11:14:37
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="flex">
    <span class="en-title">{{entitle}}</span>
    <template v-if="isZh">
      <img src="/img/title.png" alt="" class="
      title-img">
      <span class="zh-title self-center">{{zhtitle}}</span>
    </template>
  </div>
</template>

<script>
import { useIsZh } from '@/utils/useIsZh'
export default {
  props: {
    entitle: {
      type: String,
      default: 'title'
    },
    zhtitle: {
      type: String,
      default: '标题'
    }
  },
  setup(){
    const {isZh} = useIsZh()
    return {
      isZh
    }
  }
}
</script>

<style lang="scss" scoped>

@media screen and (min-width: 1400px) {
  .en-title{
    font-size: 24px;
  }
  .zh-title{
    font-size: 14px;
  }
  .title-img{
    width: 15px;
    margin-left: 19px;
    margin-right: 14px;
  }
}
@media screen and (max-width: 1401px) {
  .en-title{
    font-size: 12px;
  }
  .zh-title{
    font-size: 7px;
  }
  .title-img{
    width: 7px;
    margin-left: 11px;
    margin-right: 6px;
  }
}
.en-title{
  font-weight: bold;
  color: $activeTxt;
}
.zh-title{
  font-weight: bold;
  color: #707070;
}
</style>